import React, { useEffect, useState } from 'react';
import {
  View,
  Image,
  Text
} from '@tarojs/components';
import Taro from '@tarojs/taro';
import NavBar from '@/components/NavBar';
import './index.scss';

const Protocol = () => {
  const [titleBarHeight, setTitleBarHeight] = useState(0);

  useEffect(() => {
    Taro.getSystemInfo({
      success: (res) => {
        let height = res.titleBarHeight + res.statusBarHeight
        setTitleBarHeight(height)
      }
    });
  }, [])

  const doBack = () => {

  }

  const showDetail = (url, name) => {
    Taro.navigateTo({
      url: `/pages/webview/index?url=${url}&name=${name}`
    });
  }

  return (
    <View className='protocol_container'>
      {/* <NavBar
        title="协议与说明"
        onClick={()=>{doBack()}}
      /> */}
      <View
        className='protocol_section'
        style={{
          paddingTop: `${titleBarHeight}px`
        }}
      >
        <View className='protocol_view' >
          <View className='protocol_view_section' onClick={()=>{showDetail('https://jala-test-images.sndaurl.cn/images/zrtYs.html', '隐私政策')}}>
            <View className='protocol_view_section_info'>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/privacyPolicy.png'
                className='protocol_view_section_icon'
              />
              隐私政策
            </View>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrow.png'
              className='protocol_view_section_arrow'
            />
          </View>
          <View className='protocol_view_section' onClick={()=>{showDetail('https://jala-test-images.sndaurl.cn/images/Service.html', '服务协议')}}>
            <View className='protocol_view_section_info'>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/serviceAgreement.png'
                className='protocol_view_section_icon'
              />
              服务协议
            </View>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrow.png'
              className='protocol_view_section_arrow'
            />
          </View>
        </View>
      </View>
    </View>
  )
}
export default Protocol;
